<template>
  <div class="filter-container">
    <!-- 顶部按钮区 -->
    <div class="button-group">
      <el-button
        type="primary"
        plain
        @click="handleClear"
        class="clear-btn"
        size="small"
      >
        清空
      </el-button>
      <el-button
        type="primary"
        @click="handleConfirm"
        class="confirm-btn"
        size="small"
      >
        确定
      </el-button>
    </div>

    <el-collapse v-model="activeFilter" class="filter-collapse" border>
      <el-collapse-item title="主题" name="theme" class="filter-item">
        <el-checkbox-group v-model="selectedThemes" class="checkbox-group">
          <el-checkbox label="中苏关系 外交政策" class="checkbox-item">
            中苏关系 外交政策 (1.4万)azazazzaazazazzaaazazzaza
          </el-checkbox>
          <el-checkbox label="人民军队 军队建..." class="checkbox-item">
            人民军队 军队建... (1.32万)
          </el-checkbox>
          <el-checkbox label="军事演习 联合反恐" class="checkbox-item">
            军事演习 联合反恐 (8902)
          </el-checkbox>
          <el-checkbox label="军事作战 作战理论" class="checkbox-item">
            军事作战 作战理论 (2149)
          </el-checkbox>
          <el-checkbox label="未来战争 武器装..." class="checkbox-item">
            未来战争 武器装... (1.89万)
          </el-checkbox>
        </el-checkbox-group>
      </el-collapse-item>

      <el-collapse-item
        title="学科"
        name="subject"
        class="filter-item"
      ></el-collapse-item>
      <el-collapse-item
        title="专题"
        name="topic"
        class="filter-item"
      ></el-collapse-item>
      <el-collapse-item
        title="资源类型"
        name="resource"
        class="filter-item"
      ></el-collapse-item>
      <el-collapse-item
        title="语种"
        name="language"
        class="filter-item"
      ></el-collapse-item>
      <el-collapse-item
        title="发表年份"
        name="year"
        class="filter-item"
      ></el-collapse-item>
      <el-collapse-item
        title="发表作者"
        name="author"
        class="filter-item"
      ></el-collapse-item>
      <el-collapse-item
        title="发表机构"
        name="institution"
        class="filter-item"
      ></el-collapse-item>
      <el-collapse-item
        title="数据来源"
        name="source"
        class="filter-item"
      ></el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "FilterComponent",
  data() {
    return {
      activeFilter: ["theme"],
      selectedThemes: [],
    };
  },
  methods: {
    handleClear() {
      this.selectedThemes = [];
      this.activeFilter = [];
    },
    handleConfirm() {
      console.log("筛选条件：", {
        主题: this.selectedThemes,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-container {
  width: 320px;
  overflow: hidden;
  box-sizing: border-box;
}

.button-group {
  width: 320px;
  height: 78px;
  background: #ffffff;
  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.09);
  border-radius: 4px 4px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;

  .clear-btn {
    width: 120px;
    height: 42px;
    margin-right: 10px;
    background-color: #fff;

    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }

  .confirm-btn {
    width: 120px;
    height: 42px;
    background-color: #409eff;
    border-color: #409eff;

    &:hover {
      background-color: #66b1ff;
    }
  }
}

.filter-collapse {
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  .filter-item {
    padding: 0 20px;
  }

  ::v-deep .el-collapse-item__header {
    background: #eef4ff;
    border-radius: 4px;
    padding: 0 20px;
    margin-top: 12px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }

 ::v-deep .el-collapse-item__content {
   border: none;
       padding-bottom: 11px;
}
}

.checkbox-group {
  padding: 24px 14px;

  .checkbox-item {
    display: block;
    margin-bottom: 12px;
    padding: 2px 0;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    display: flex;

    &:last-child {
      margin-bottom: 0;
    }

    ::v-deep .el-checkbox__label {
      padding-left: 16px;
      display: inline-block;
      max-width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>